<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import pageColumnList from "@/util/pageColumnList";
import {EventBus} from "@/components/javaScript/EventBus";
import {setCssVar} from "@/util/util";
import request from "@/router/axios";
import Vue from "vue";

export default {
  name: "app",
  provide: {
    ...pageColumnList
  },
  data() {
    return {
      pageVisible: false,
      field: {},
      designer: {},
      dialogKey: 1
    };
  },
  methods: {
    initThemeColor() {
      let themeColor = this.$store.state.common.colorName;
      if (themeColor) {
        setCssVar('--color-primary', themeColor);
      }
    },
    pageClosed() {
      this.pageVisible = false;
      this.dialogKey = 1;
      this.field = {};
      this.designer = {};
    },
    testWebSocket() {
      let ws = new WebSocket('ws://192.168.0.20:8055/websocket/1650784635466608640');
      ws.onmessage = (e) => {
        console.log("WebSocket连接成功")
        if (e.data !== "连接成功") {
          let data = JSON.parse(e.data);
          this.$notify({
            title: '📢 通知',
            message: data.message,
          });
        }
      };
    },
    onDialog() {
      EventBus.$off("pageDialog");
      EventBus.$on('pageDialog', (data) => {
        this.field = data.field;
        this.designer = data.designer;
        this.pageVisible = true;
        this.dialogKey += 1;
      });
    },
    initMenu() {
      // console.log(localStorage.getItem("saber-menuAll"))
      this.$store.dispatch("GetMenu").then(data => {
      })
    }
  },
  mounted() {
    // this.testWebSocket();
    // this.onDialog();

    this.initMenu();
    this.initThemeColor();
    this.dialogKey = 1;
    this.pageVisible = false;
  },
  /*beforeCreate() {
    if (!this.$route.path.includes("micro-")) {
      (async function (src) {
        const res = await request({method: "get", url: src, authorization: false})
        new Function(res.data)();
        let componentObj = window['comTemplate'].default;

        for (const key in componentObj) {
          Vue.component(key, () => {
            return new Promise((resolve) => {
              resolve(componentObj[key])
            })
          })
        }
      })("/minio/comTemplate.umd.min.js")
    }
  },*/
  beforeDestroy() {
    EventBus.$off("pageDialog");
  },
  watch: {},
};
</script>
<style lang="scss">
.CodeMirror-hints {
  z-index: 3000 !important;
}

#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.avue--detail .el-col {
  margin-bottom: 0;
}

.el-input--mini .el-input__inner {
  height: 28px !important;
  line-height: 28px !important;
}

.avue-crud {
  //height: 100%;

  .el-card {

    .el-card__body {
      //height: 100%;

      .el-form {
        //height: 100%;

        .el-table {
          //height: 100%;

          .el-table__header-wrapper, .el-table__fixed-header-wrapper {
            .el-table__header {
              thead {
                tr {
                  th {
                    background: #fafafa;
                    //padding: 10px 0;
                  }
                }
              }
            }
          }

          .el-button {
            padding: 0;
            font-size: 13px;
          }
        }
      }
    }
  }
}

.el-dialog {
  margin-top: 10vh !important;

  .el-dialog__header {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    padding: 10px 20px;

    .el-dialog__headerbtn {
      top: 14px;
    }
  }

  .el-dialog__body {
    padding: 10px 20px 0;
  }
}

.el-form {
  .el-select {
    width: 100%;
  }

  .el-input-number {
    width: 100%;
  }
}

/*.el-table--small .el-table__cell {
  padding: 6px 0
}*/
</style>
